Node / reticulum_mirror / MeshChatX / files / meshchatx / src / frontend / components / map / internal / MapClusterPanel.vue

Displaying Raw • Download

T8b949e<!-- SPDX-License-Identifier: 0BSD -->

Tff7b72<templateTff7b72>

Tff7b72<div

Te6edf3class=Ta5d6ff"absolute bottom-4 left-4 right-4 sm:left-4 sm:right-auto sm:w-80 md:max-lg:w-72 lg:w-80 z-20 bg-white dark:bg-zinc-900 rounded-xl shadow-2xl border border-gray-200 dark:border-zinc-800 overflow-hidden text-gray-900 dark:text-zinc-100"

Tff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"p-4 border-b border-gray-200 dark:border-zinc-800 flex items-center justify-between"Tff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"flex items-center gap-3"Tff7b72>

Tff7b72<div

Te6edf3class=Ta5d6ff"size-8 rounded-full flex items-center justify-center bg-blue-600 text-white text-sm font-bold"

Tff7b72>

Tff7b72{{ Te6edf3clusterTe6edf3.count Tff7b72}}

Tff7b72</div>

Tff7b72<divTff7b72>

Tff7b72<h3 Te6edf3class=Ta5d6ff"font-bold text-gray-900 dark:text-zinc-100"Tff7b72>Tff7b72{{ Te6edf3clusterTe6edf3.count Tff7b72}} interfaces hereTff7b72</h3>

Tff7b72<div Te6edf3class=Ta5d6ff"text-[10px] font-mono text-gray-500 uppercase tracking-tighter"Tff7b72>

Tap an item to focus

Tff7b72</div>

Tff7b72</div>

Tff7b72</div>

Tff7b72<button

Te6edf3class=Ta5d6ff"text-gray-500 hover:text-gray-700 dark:hover:text-zinc-300 p-1"

Te6edf3title=Ta5d6ff"Close"

@Te6edf3click=Ta5d6ff"$emit('close')"

Tff7b72>

Tff7b72<v-icon Te6edf3icon=Ta5d6ff"mdi-close" Te6edf3size=Ta5d6ff"20"Tff7b72>Tff7b72</v-icon>

Tff7b72</button>

Tff7b72</div>

Tff7b72<div Te6edf3class=Ta5d6ff"max-h-72 overflow-y-auto divide-y divide-gray-100 dark:divide-zinc-800"Tff7b72>

Tff7b72<button

Te6edf3v-for=Ta5d6ff"(item, idx) in cluster.items"

Te6edf3:key=Ta5d6ff"idx"

Te6edf3class=Ta5d6ff"w-full flex items-center gap-3 px-4 py-2 text-left hover:bg-gray-50 dark:hover:bg-zinc-800 transition-colors"

@Te6edf3click=Ta5d6ff"$emit('select', item)"

Tff7b72>

Tff7b72<div

Te6edf3v-if=Ta5d6ff"item.kind === 'discovered'"

Te6edf3class=Ta5d6ff"size-7 rounded-full flex items-center justify-center border-2 border-emerald-500 bg-emerald-50 text-emerald-600 shrink-0"

Tff7b72>

Tff7b72<MaterialDesignIcon Te6edf3:icon-name=Ta5d6ff"getDiscoveredIconName(item.iconKey)" Te6edf3class=Ta5d6ff"size-[14px]" Tff7b72/>

Tff7b72</div>

Tff7b72<div

Te6edf3v-else-if=Ta5d6ff"item.kind === 'telemetry'"

Te6edf3class=Ta5d6ff"size-7 rounded-full flex items-center justify-center border-2 border-blue-500 bg-blue-50 text-blue-600 shrink-0"

Tff7b72>

Tff7b72<v-icon Te6edf3:icon=Ta5d6ff"'mdi-' + (item.peer?.lxmf_user_icon?.icon_name || 'account')" Te6edf3size=Ta5d6ff"14"Tff7b72>Tff7b72</v-icon>

Tff7b72</div>

Tff7b72<div

v-else

Te6edf3class=Ta5d6ff"size-7 rounded-full flex items-center justify-center border-2 border-gray-400 bg-gray-50 text-gray-500 shrink-0"

Tff7b72>

Tff7b72<v-icon Te6edf3icon=Ta5d6ff"mdi-help" Te6edf3size=Ta5d6ff"14"Tff7b72>Tff7b72</v-icon>

Tff7b72</div>

Tff7b72<div Te6edf3class=Ta5d6ff"min-w-0 flex-1"Tff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"text-sm font-medium truncate"Tff7b72>Tff7b72{{ Te6edf3itemTe6edf3.label Tff7b72}}Tff7b72</div>

Tff7b72<div Te6edf3v-if=Ta5d6ff"item.identifier" Te6edf3class=Ta5d6ff"text-[10px] font-mono text-gray-500 truncate"Tff7b72>

Tff7b72{{ Te6edf3itemTe6edf3.identifier Tff7b72}}

Tff7b72</div>

Tff7b72</div>

Tff7b72<v-icon Te6edf3icon=Ta5d6ff"mdi-chevron-right" Te6edf3size=Ta5d6ff"16" Te6edf3class=Ta5d6ff"text-gray-400 shrink-0"Tff7b72>Tff7b72</v-icon>

Tff7b72</button>

Tff7b72</div>

Tff7b72</div>

Tff7b72</template>

Tff7b72<scriptTff7b72>

import MaterialDesignIcon from "../../MaterialDesignIcon.vue";

import { getDiscoveredIconName } from "./discoveredIcons.js";

export default {

name: "MapClusterPanel",

components: { MaterialDesignIcon },

props: {

cluster: {

type: Object,

required: true,

},

},

emits: ["close", "select"],

methods: {

getDiscoveredIconName,

},

};

Tff7b72</script>